<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
	
		<style type="text/css">
			.rich-messages-marker img {padding-right:7px;}
			.rich-message-label {color:red;}
			.top {vertical-align:top;}
		</style>		
			
			
		<rich:panel style="width:400px">
			<f:facet name="header">
				<h:outputText value="Form Validation. Using rich:messages"/>
			</f:facet>
			
			<h:form>
				<rich:messages passedLabel="Data is allowed to be stored." layout="list">
					<f:facet name="header">
						<h:outputText value="Entered Data Status:"></h:outputText>
					</f:facet>
					<f:facet name="passedMarker">
						<h:graphicImage  value="/images/ajax/passed.gif" />	
					</f:facet>
					<f:facet name="errorMarker">
						<h:graphicImage value="/images/ajax/error.gif" />	
					</f:facet>
				</rich:messages>

				<h:panelGrid columns="2">
					<h:outputText value="Name:" />
					<h:inputText label="Name" id="name" required="true" value="#{userBean.name}">
						<f:validateLength minimum="3"  />
					</h:inputText>
					<h:outputText value="Job:" />
					<h:inputText label="Job" id="job" required="true" value="#{userBean.job}">
						<f:validateLength minimum="3" maximum="50"  />
					</h:inputText>
					<h:outputText value="Address:" />
					<h:inputText label="Address" id="address" required="true" value="#{userBean.address}">
						<f:validateLength minimum="10" />
					</h:inputText>
					<h:outputText value="Zip:" />
					<h:inputText label="Zip" id="zip" required="true" value="#{userBean.zip}">
						<f:validateLength minimum="4" maximum="9"  />
					</h:inputText>
					<f:facet name="footer">
						<a4j:commandButton value="Validate" />
					</f:facet> 
				</h:panelGrid>
			</h:form>
		</rich:panel>
</ui:composition>